<template>
    <div class="page">
     <div class="synopsis">
       <div style="padding-top: 350px;padding-left: 20px;color: white;padding-bottom: 20px">
         <h1>博客简介</h1>
         <p>初衷: 热爱分享 ! 一起成长</p>
         <p>
           十年生死两茫茫，
           不思量，自难忘。
           千里孤坟，无处话凄凉。
           纵使相逢应不识，
           尘满面，鬓如霜。
           夜来幽梦忽还乡，
           小轩窗，正梳妆。
           相顾无言，惟有泪千行。
           料得年年肠断处，
           明月夜，短松冈</p>
       </div>
     </div>
      <div style="border: 1px solid greenyellow;border-radius: 10px;margin-top: 10px;background: rgba(230, 162, 60,0.3)">
        <h1 style="margin-left: 10px">博客信息 </h1>
        <el-divider/>
        <div style="display: flex;justify-content: space-around;margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>技术栈</span>
            <el-button style="float: right; padding: 3px 0" type="info" icon="el-icon-message"  circle></el-button>
          </div>
          <div  v-for="(item,index) in technology" :key="index" class="text item">
            <li> {{technology[index] }}</li>
          </div>
        </el-card>
        <el-card class="box-card" >
          <div slot="header" class="clearfix">
            <span>核心开发技术</span>
            <el-button style="float: right; padding: 3px 0" type="warning" icon="el-icon-star-off" circle></el-button>
          </div>
          <div v-for="(item,index) in exploit" :key="index" class="text item">
           <li> {{exploit[index] }}</li>
          </div>
        </el-card>
        </div>
      </div>
      <div style="border: 1px solid steelblue;margin-top: 10px;border-radius: 10px;background: rgba(83, 124, 165,0.4)">
        <h1 style="margin-left: 10px">开发周期</h1>
        <el-divider/>
        <div class="block">
          <el-timeline>
            <el-timeline-item timestamp="2020-07-23" placement="top">
              <el-card>
                <h4>项目基本功能开发完成</h4>
                <p>黄啟军 提交于 2020-07-23 02:50</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2020-07-20" placement="top">
              <el-card>
                <h4>项目开始启动</h4>
                <p>黄啟军 提交于 2020-07-20 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "",
      data(){
          return{
            technology:["精华博客","学习资料下载","资源网站汇总","学习交流"],
            exploit:["SpringBoot/Shiro","Mybatis/Oss","Vue","Mysql/Redis"]
          }

      },
      methods: {
        errorHandler() {
          return true
        }
      }
    }
</script>

<style scoped lang="scss">
  .page{
    border: 1px solod #E6A23C;
    border-radius: 10px;
  }
 .synopsis{
   margin-top: 10px;
   width: 1200px;
   height: auto;
   background:url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4139968162,3905446376&fm=26&gp=0.jpg");
   background-size:1200px 600px
 }
 .text {
   font-size: 14px;
 }

 .item {
   margin-bottom: 18px;
 }

 .clearfix:before,
 .clearfix:after {
   display: table;
   content: "";
 }
 .clearfix:after {
   clear: both
 }

 .box-card {
   width: 480px;
 }
</style>
